<template>
  <el-dialog
    v-model="visible"
    :title="title"
    width="720px"
    draggable
    align-center
  >
    <div class="edit-box-container">
      <textarea
        v-model="inputValue"
        placeholder="在这里输入内容"
        class="edit-box"
      ></textarea>
      <el-button type="primary" class="submit-button" @click="saveNote">提交</el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import {ref} from 'vue';
import request from '@/config/axios'

const visible = ref()
const title = ref('使用说明')

const inputValue = ref(''); // 用于绑定输入框内容的响应式引用

const fetchData = async function () {
  const response = await request.get({
    url: '/transferPhone/getPhoneUseMemo',
    params: {}
  })
  inputValue.value = response
}

const saveNote = function () {
  request.post({
    url: '/transferPhone/updatePhoneUseMemo',
    data: {memo: inputValue.value}
  }).then(() => {
    visible.value = false
    ElMessage.success('保存成功')
  })
}

defineExpose({
  open: () => {
    visible.value = true
    fetchData()
  }
})


</script>

<style scoped>
.edit-box-container {
  display: flex;
  flex-direction: column;
}

.edit-box {
  width: 100%; /* 使textarea宽度占满容器 */
  height: 400px; /* 设置textarea的高度，可根据需求调整 */
  padding: 10px;
  box-sizing: border-box; /* 包含内边距和边框在内计算元素总宽度 */
  border: 1px solid #dcdcdc; /* 边框样式 */
  border-radius: 4px; /* 圆角 */
  resize: vertical; /* 允许用户垂直调整textarea大小，但禁止水平调整 */
}

.submit-button {
  margin-top: 20px;
  width: 100%; /* 如果希望按钮宽度自适应，可以设置为auto或具体宽度 */
  display: flex;
  justify-content: center; /* 这将使得按钮容器内的按钮水平居中 */
}
</style>
